<template>

  <h1>1. 按钮和几个简单的标签</h1>

  <div class="hello">
    <h1>{{ msg }}</h1>
    <el-empty description="空空如也~~~ 这个描述可以自己改"></el-empty>
  </div>
  <div class="hello">
    <el-button>默认大小按钮</el-button>

    <!-- 下面的size是不能乱写的，否则会编译不通过。官网的size介绍 https://element-plus.org/zh-CN/component/button.html -->

    <el-button size="large">大型按钮</el-button>
    <el-button size="medium">中等按钮</el-button>
    <el-button size="small">小型按钮</el-button>

    <!-- 注意下面的size并没有起到应用的作用，是因为字体的原因吗？ -->
    <el-button size="mini">微小型按钮</el-button>

  </div>
  <div class="hello">
    <el-button type="primary">常规按钮</el-button>
    <el-button type="success">成功按钮</el-button>
    <el-button type="info">信息按钮</el-button>
    <el-button type="warning">警告按钮</el-button>
    <el-button type="danger">危险按钮</el-button>
  </div>
  <div class="hello">
    <el-button type="primary" :plain="true">描边</el-button>
    <el-button type="primary" :round="true">圆角</el-button>
    <el-button type="primary" :circle="true">圆形</el-button>
    <el-button type="primary" :disable="true">禁用</el-button>
    <el-button type="primary" :loading="true">加载</el-button>
  </div>
  <div class="hello">
    <el-button type="primary" icon="Share"></el-button>
    <el-button type="primary" icon="Delete"></el-button>
    <el-button type="primary" icon="Search">图标在前</el-button>

    <el-button type="primary">
      图标在后
      <el-icon class="el-icon--right">
        <Upload />
      </el-icon>
    </el-button>

    <el-button type="primary">
      <!-- 这种写法不如上面的方式更简单 -->
      <el-icon class="el-icon--right">
        <Upload />
      </el-icon>
      图标在前2
    </el-button>

  </div>

  <div class="hello">
    <el-tag>普通标签</el-tag>
    <el-tag :hit="true">描边标签</el-tag>
    <el-tag color="purple">紫色背景标签</el-tag>
  </div>
</template>

<script>
export default {
  // 原文 name:'HelloWorld'
  name: 'HelloWorld - 这个名字可以用来做什么？',
  props: {
    msg: String
  }
}
</script>

<style>
.hello {
  margin-top: 40px;
}
</style>